<template>
<!-- 这是四大类的详情 -->
  <NewCard>
    <div class="detail_main">
      <h2>
        <svg-icon icon-class="return_icon" class="returnIcon" @click="returnBtn"/>
        <b>{{ typeTxt }}</b>
        <p ref="detailTitle">{{ orderinfo.title }}</p>
        <svg-icon icon-class="more_icon" v-if="titleMoreShow" @click="titleMoreBtn" :class="titleMoreBtnTxt?'':'moreTxt'"/>
      </h2>
      <div class="detail_content" ref="detailContent" v-if="orderinfo.id">
        <div class="detail_source">
          <ul v-if="listActive == '1'">
            <li>发布部门：{{ orderinfo.from }}</li>
            <li>适用区域：{{ orderinfo.scope }}</li>
            <li>发布日期：{{ orderinfo.publishTime }}</li>
            <li>效力级别：{{ currentRank }}</li>
            <li>时效性：{{ currentState }}</li>
            <li>生效日期：{{ orderinfo.effectiveTime }}</li>
          </ul>
          <p v-else>
            {{ orderinfo.from }}
            ·
            {{ orderinfo.publishTime ? orderinfo.publishTime.substring(0,10) : orderinfo.createTime.substring(0,10) }}
          </p>
        </div>
        <!-- 1法条 2解答 3政策 4合同 -->
        <div class="detail_txt" v-if="listActive == '1'">
          <p v-for="cd in orderinfo.info" :key="cd.id">
            <b v-for="(con, index) in cd.content" :key="index">{{ con }}</b>
          </p>
        </div>
        <!-- 1法条 2解答 3政策 4合同 -->
        <div class="detail_txt" v-else-if="listActive == '2'">
          <p>{{ orderinfo.background }}</p>
          <div class="detail_reply">
            <p v-for="an in orderinfo.answer" :key="an.id">
              {{ an.content }}
            </p>
          </div>
        </div>
        <!-- 1法条 2解答 3政策 4合同 -->
        <div class="detail_txt" v-if="listActive == '3'">
          <p
            v-for="cd in orderinfo.info"
            :key="cd.id"
            v-labellight="{
              hWord: orderinfo.labelKayword,
              word: cd.content,
            }"
          >
            {{ cd }}
          </p>
        </div>
        <!-- 1法条 2解答 3政策 4合同 -->
        <div class="detailcontent" v-if="listActive == '4'">
           <p
            v-for="cd in orderinfo.info"
            :key="cd.id"
            v-html="cd.replace(/\r/g,'</p><p>')"
          >
          </p>
          <!-- <p
            v-for="cd in orderinfo.info"
            :key="cd.id"
            v-labellight="{ hWord: orderinfo.labelKayword, word: cd }"
          >
            {{ cd }}
          </p> -->
        </div>

        <div class="accessory">
          <ul>
            <li v-for="(file, index) in orderinfo.files" :key="index">
              <a :href="file.url">
                <span class="el-icon-document"> 附件：{{ file.name }}</span>
                <svg-icon icon-class="download" />
              </a>
            </li>
            <li v-for="(file, index) in fileList" :key="index">
              <a :href="file.url">
                  <span class="el-icon-document"> {{ file.content }}</span>
                  <svg-icon icon-class="download" />
              </a>
            </li>
          </ul>
        </div>
        <div class="detail_label">
          <el-tag
            v-for="(label, index) in labelList"
            :key="index"
            @click="clickDetailLabel(label)"
            >{{ label }}</el-tag
          >
          <el-button
            size="mini"
            class="label_more"
            @click="labelMore"
            v-if="moreState"
            v-show="morehypo"
          >
            更多<i class="el-icon-caret-bottom"></i>
          </el-button>
          <el-button
            size="mini"
            class="label_more"
            @click="labelMorePack"
            v-else
            v-show="morehypo"
          >
            收起<i class="el-icon-caret-top"></i>
          </el-button>
        </div>

        <!-- *以上回答仅供参考* -->
        <div class="forOnly" v-if="listActive == '2'">
          <el-divider>*以上回答仅供参考*</el-divider>
        </div>

      </div>
    </div>
    <div class="ribbon_content">
      <Ribbon
        :detail="orderinfo"
        :listActive="listActive"
        v-on="$listeners"
        :isFeat="isFeat"
      ></Ribbon>
    </div>
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import Ribbon from "@/components/Ribbon/ribbon.vue";
import debounce from "lodash/debounce";
export default {
  name: "detailPage",
  components: { NewCard, Ribbon },
  props: {
    orderinfo: {
      type: Object,
      default: () => {
        return {};
      },
    },

    listActive: {
      type: [Number, String],
      default: 0,
    },
  },

  data() {
    return {
      typeTxt: "",
      labelList: [], //文章标签的列表
      labelListNum: 8, //文章默认一次添加的数量

      isFeat: false, //代表当前是推荐页点击进去的支付页面，传值给ribbon组件
      moreState: true, //标签更多按钮的显示状态(更多还是收起)
      morehypo: true, //当标签数量少于8个的时候隐藏

      startTime: "", // 进入页面的时间
      currentTime: "", //切走文章时的离开的时间

      fileList: [],//附件列表
      titleMoreShow: false,//当前标题的行数
      titleMoreBtnTxt: true,//标题更多按钮 true更多 false收起
    };
  },
  mounted() {
    console.log(this.orderinfo, "对的");
    // 判断没有id的时候提示数据异常，请联系商务
    if(!this.orderinfo.id){
      this.$message({message: '数据异常，请联系商务',type: 'warning'});
    }

    //获取进入页面的时间
    this.startTime = Date.now();
    this.countType(); //进入页面判断当前文章的类型
    this.defaultLabel(); // 默认获取8个标签

    //当没有标签的时候隐藏
    if (!this.orderinfo.labels) {
      this.morehypo = false;
    } else {
      //当标签数量少于8个的时候隐藏
      if (this.orderinfo.labels.length < 8) {
        this.morehypo = false;
      }
    }

    //先显示更多按钮
    this.morehypo = true;
    //当标签数量少于8个的时候隐藏
    if (this.orderinfo.labels.length < 8) {
      this.morehypo = false;
    }

    // 过滤出政策的附件列表
    this.fileList = []
    if(this.orderinfo.info){
      // 政策和法条的
      this.fileList = this.orderinfo.info.filter(item=>{
        return item.type == "3"
      })
    }else{
      //解答的
      this.fileList = this.orderinfo.answer.filter(item=>{
        return item.type == "3"
      })
    }

    // 标题样式
    this.$nextTick(()=>{
      this.$refs.detailTitle.style['-webkit-line-clamp'] = 'inherit'
      this.titleMoreShow = this.$refs.detailTitle.clientHeight > 72
      if(this.titleMoreShow){
          this.titleMoreBtnTxt = true
          this.$refs.detailTitle.style['-webkit-line-clamp'] = 3
          this.$refs.detailTitle.style['font-weight'] = 'bold'
          let titleHeight = this.$refs.detailTitle.clientHeight + 58
          this.$refs.detailContent.style['height'] = `calc(100% - ${titleHeight}px)`
      }
    })
  },
  methods: {
    // 返回
    returnBtn(){
      this.$bus.$emit('returnBtnShow',0)
    },

    // 点击标题更多按钮
    titleMoreBtn(){
      if(this.titleMoreBtnTxt){
          this.titleMoreBtnTxt = false
          this.$refs.detailTitle.style['-webkit-line-clamp'] = 'inherit'
          this.$refs.detailTitle.style['font-weight'] = '400'
          let titleHeight = this.$refs.detailTitle.clientHeight + 58
          this.$refs.detailContent.style['height'] = `calc(100% - ${titleHeight}px)`
      }else{
          this.titleMoreBtnTxt = true
          this.$refs.detailTitle.style['-webkit-line-clamp'] = 3
          this.$refs.detailTitle.style['font-weight'] = 'bold'
          let titleHeight = this.$refs.detailTitle.clientHeight + 58
          this.$refs.detailContent.style['height'] = `calc(100% - ${titleHeight}px)`
      }
    },

    //默认获取8个标签
    defaultLabel() {
      this.labelListNum = 8;
      this.$nextTick(() => {
        if (this.orderinfo.labels) {
          this.labelList = this.orderinfo.labels.slice(
            0,
            this.labelListNum
          );
        }
      });
    },
    //根据listActive判断当前点击的是什么类型的文章
    // 1法条 2解答 3政策 4合同
    countType() {
      if (this.listActive == "1") {
        this.typeTxt = "法条";
      } else if (this.listActive == "2") {
        this.typeTxt = "解答";
      } else if (this.listActive == "3") {
        this.typeTxt = "政策";
      } else {
        this.typeTxt = "合同";
      }
    },
    //点击标签的更多按钮展示更多标签
    labelMore() {
      this.labelListNum = this.labelListNum + 8;
      this.labelList = this.orderinfo.labels.slice(
        0,
        this.labelListNum
      );
    },
    //点击标签的收起按钮
    labelMorePack() {
      this.labelList = this.orderinfo.labels.slice(0, 8);
      this.moreState = true;
    },
    //点击内容页标签的时候 去搜索
    // clickDetailLabel(label){
    //     //判断关键词列表当中没有这个关键词的时候才去发请求
    //     this.$bus.$emit('detailLabel',label)
    // },
    //点击内容页标签的时候 去搜索  //防抖
    clickDetailLabel: debounce(function (label) {
      // 当前不在搜索页，跳转到搜索页，然后再搜索
      this.$router.push({path:'/Bm-search/searchAnswer',query:{label}})
    }, 200),

    // 计算在文章内停留的时间
    getArticleTime() {
      //stayTime在此文章停留的时间
      let stayTime = this.currentTime - this.startTime;
      console.log(this.orderinfo);
      //再次获取进入文章的时间
      this.startTime = Date.now();
    },
  },
  watch: {
    //监听orderinfo?.goods的变化去改变当前类型
    orderinfo(newValue, oldValue) {
      // 判断没有id的时候提示数据异常，请联系商务
      if(!this.orderinfo.id){
        this.$message({message: '数据异常，请联系商务',type: 'warning'});
      }

      //切走文章时的时间
      this.currentTime = Date.now();
      // 计算在文章内停留的时间
      this.getArticleTime();

      this.countType();
      //文章数据发生变化后滚动条到顶部
      // this.$refs.detailContent.scrollTo(0, 0)
      //先显示更多按钮
      this.morehypo = true;
      //当标签数量少于8个的时候隐藏
      if (this.orderinfo.labels.length < 8) {
        this.morehypo = false;
      }
      
      this.labelList=[]
      this.countType(); //进入页面判断当前文章的类型
      this.defaultLabel(); // 默认获取8个标签

      // 过滤出政策的附件列表
      this.fileList = []
      if(this.currentDetail.info){
        // 政策和法条的
        this.fileList = this.currentDetail.info.filter(item=>{
          return item.type == "3"
        })
      }else{
        //解答的
        this.fileList = this.currentDetail.answer.filter(item=>{
          return item.type == "3"
        })
      }

      // 标题样式
      this.$nextTick(()=>{
        this.$refs.detailTitle.style['-webkit-line-clamp'] = 'inherit'
        this.titleMoreShow = this.$refs.detailTitle.clientHeight > 72
        if(this.titleMoreShow){
            this.titleMoreBtnTxt = true
            this.$refs.detailTitle.style['-webkit-line-clamp'] = 3
            this.$refs.detailTitle.style['font-weight'] = 'bold'
            let titleHeight = this.$refs.detailTitle.clientHeight + 58
            this.$refs.detailContent.style['height'] = `calc(100% - ${titleHeight}px)`
        }
      })
    },

    //监听点击标签更多 当标签全部展示完了之后要显示收起 点击收起只展示8个
    labelListNum(newValue, oldValue) {
      // console.log(newValue,this.orderinfo?.goods?.labels.length);
      if (newValue > this.orderinfo.labels.length) {
        this.moreState = false;
      } else {
        this.moreState = true;
      }
    },
  },
  computed: {
    // 计算法律的效力级别：1法律 2宪法 3司法解释 4行政法规 5监察法规 6决定 7地方性法规 8地方规章 9部门规章 10规范性文件 11 行业规范 12行业标准
    currentRank() {
      switch (this.orderinfo?.type) {
        case "1":
          return "法律";
        case "2":
          return "宪法";
        case "3":
          return "司法解释";
        case "4":
          return "行政法规";
        case "5":
          return "监察法规";
        case "6":
          return "决定";
        case "7":
          return "地方性法规";
        case "8":
          return "地方规章";
        case "9":
          return "部门规章";
        case "10":
          return "规范性文件";
        case "11":
          return "行业规范";
        case "12":
          return "行业标准";
      }
    },
    // 法条生效状态 1 有效 2 失效 3 未生效 5 修改 9 已废止
    currentState() {
      switch (this.orderinfo?.effectiveStatus) {
        case 1:
          return "现行有效";
        case 2:
          return "已失效";
        case 3:
          return "未生效";
        case 5:
          return "修改";
        case 9:
          return "已废止";
      }
    },
  },
};
</script>

<style scoped>
ul li{
  list-style: none;
}
::v-deep .top {
  display: none;
}


/* 标题 */
.detail_main {
  height: 100%;
  overflow-y: auto;
}
.detail_main::-webkit-scrollbar{
  width: 0;
}

.detail_main h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #efefef;
  padding: 0px 20px 15px 20px;
  margin-bottom: 20px;
}

.detail_main h2 > b {
  display: block;
  width: 8%;
  height: 24px;
  background-color: #747474;
  color: #fff;
  font-size: 14px;
  text-align: center;
  font-weight: 400;
  line-height: 24px;
  border-radius: 15px;
  margin-right: 2%;
}
.detail_main h2 > p {
  width: calc(100% - 105px);
  margin: 0;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* -webkit-line-clamp: 3; */
  overflow: hidden;
}
.detail_main h2 svg{
  margin: 0 auto;
  color: #f87a23;
  padding-bottom: 0;
  cursor: pointer;
  transition: all 0.3s;
}
.detail_main h2 svg.moreTxt{
    transform:rotate(180deg);
}

.detail_main h2 > .returnIcon{
  margin: 0;
  margin-right: 5px;
  cursor: pointer;
}

/* 内容区 */
.detail_content {
  height: 86%;
  overflow-y: auto;
  overflow-x: initial;
  padding: 0 30px;
}
.detail_content::-webkit-scrollbar {
  width: 0;
}
/* 来源 */
.detail_source > p {
  font-size: 12px;
  color: #999;
}
.detail_source ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  padding: 10px 20px;
  margin: 0;
  background: #f4f5f8;
  border-radius: 8px;
  color: #656669;
  font-size: 12px;
}
.detail_source ul > li {
  width: 28%;
  line-height: 24px;
}
.detail_source ul > li:nth-child(1) {
  width: 44%;
}
.detail_source ul > li:nth-child(4) {
  width: 44%;
}

.detail_txt {
  font-size: 14px;
  line-height: 26px;
  color: #333;
}
.detail_txt p > b {
  display: block;
  font-weight: 400;
  /* text-indent: 2em; */
  line-height: 28px;
}
.detail_txt p>b img{
    width: 100%;
}
.detail_txt p > b:first-child {
  display: inline;
  margin-right: 10px;
}
.detail_txt p > b:nth-child(2) {
  display: inline;
  text-indent: 0;
}
/* 合同类型给的间距 */
.detailcontent p{
   font-size: 14px;
  line-height: 26px;
  margin-bottom: 40px;
}

.detail_reply {
  background-color: #f6f7fa;
  border-radius: 8px;
  padding: 16px;
  color: #768097;
}
.detail_reply p {
  margin: 0;
}

/* 附件 */
.accessory {
  margin-top: 40px;
}
.accessory ul {
  padding: 0;
}
.accessory ul > li {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #666;
  border: 1px solid #efefef;
  border-radius: 8px;
}
.accessory ul > li > a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.accessory ul > li svg {
  cursor: pointer;
  font-size: 16px;
}

/* 标签 */
.detail_label {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
  margin-bottom: 10px;
}
.detail_label .el-tag {
  width: 11%;
  color: #999;
  padding: 0;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 15px;
  line-height: 26px;
  background-color: #fff;
  margin-right: 1.71%;
  margin-bottom: 10px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail_label .el-tag:nth-child(8n) {
  margin-right: 0;
}
.label_more {
  display: block;
  background-color: transparent;
  border: 0;
  margin: 0 auto;
  color: #b9b9b9;
  flex-basis: 100%;
}

/* 仅供参考 */
.forOnly{
  margin-bottom: 80px;
}
.forOnly >>> .el-divider__text{
  color: #666;
  font-size: 14px;
}

/* 功能区 */
.ribbon_content {
  position: absolute;
  /* left: -30px; */
  bottom: 0px;
  width: calc(100% + 60px);
  background-color: #fff;
  border-top: 1px solid #ecedf0;
  padding: 0 30px;
}
</style>